<template>
  <li class="pt30 pb30 bb90 clearfix" @click="gotoDetail(myActive['id'])">
    <img class="fl br2 w310 h200 mr20" :src="myActive['coverImgUrl']+'?x-oss-process=image/resize,m_fill,h_200,w_310'" width="310" height="200" alt=""/>
    <dl class="fl w550 h200">
      <dt class="c0 lh30 f20 clearfix">{{myActive['activityName']}}<span class="fr f12 c60 lh150"><i
        class="inline-block w10 h14 locationBg vm"></i>{{myActive.provinceName}}&nbsp;.&nbsp;{{myActive.cityName}}</span></dt>
      <dd class="mt10">
        <table class="w550 f12 c40 fm-songti lh20 tl vt" border="0" cellspacing="" cellpadding="">
          <tr>
            <td class="pb5">
              <b class="c7">活动日期：</b>
              <span>{{limitWord(active['startTime'],10,'')}}</span>
              <span class="mr5 ml5">至</span>
              <span>{{limitWord(active['endTime'],10,'')}}</span>
            </td>
          </tr>
          <tr>
            <td class="pb5">
              <b class="c7 vm">活动星级：</b>
              <i v-for="(i,index) in 5" class="grayStar ml10" :class="{redStar:myActive.difficulty>index}"></i>
            </td>
            <td class="pb5" v-if="myActive['activityPlaceList'].length!=0">
              <b class="c7">场地：</b>
              <span v-for="(place, index) in myActive['activityPlaceList']" v-if="index<=1">{{limitWord(place['placeName'],5,"...")}}<i class="mr10 ml10" v-if="myActive['activityPlaceList'].length>=2&&index===0">|</i></span>
            </td>
          </tr>
        </table>
      </dd>
      <dd class=" mt10 h60 overflow ">{{limitWord(myActive['activityDescripition'],40,'...')}}</dd>
      <dd class="c60 f12 fm lh28 mt10 clearfix">
        <span class="inline-block vm mr30"><em class="inline-block w15 h14 commentsBg vm mr10"></em><i class="c_orgRed_ff481d vm">{{myActive['commentCount']}}</i></span>
        <span class="inline-block vm mr30">已来过<i class="c_orgRed_ff481d vm mr5 ml5 ">{{myActive['userCount']}}</i>人</span>
        <a class=" fr detailMoreBg bg_grn_119c5b c100 h28 lh28 pl15 pr15 br2 letter1 hoverbg_orgred" v-if="myActive.status==0">活动未开始<i class="pr18"></i>
        </a>
        <a class=" fr detailMoreBg c100 h28 lh28 pl15 pr15 br2 letter1 curbg_orgred" v-if="myActive.status==1">进行中<i class="pr18"></i>
        </a>
        <a class=" fr detailMoreBg c100 h28 lh28 pl15 pr15 br2 letter1 curbg_orgred" v-if="myActive.status==2">已结束<i class="pr18"></i></a>
      </dd>
    </dl>
  </li>
</template>

<script>
  import Utils from "../assets/Util";
  export default {
    name: "activityItem",
    props:{
      active:Object
    },
    data(){
      return {
        myActive:this.active
      }
    },
    methods:{
      limitWord(words, wordsLength, mark){
          return Utils.limitworld(words, wordsLength, mark);
      },
      gotoDetail(id){
        this.$router.push({
          path: "/activityDetail",
          query: {
            id: id
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
